import {
    defineConfig,
    presetAttributify,
    presetIcons,
    presetTypography,
    presetWebFonts,
    presetWind3,
    transformerDirectives,
    transformerVariantGroup
} from 'unocss'
import presetRemToPx from '@unocss/preset-rem-to-px'
export default defineConfig({
    shortcuts: [
        {
            'flex-center': 'flex justify-center items-center'
        },
        {
            'flex-col-center': 'flex-center flex-col'
        },
        {
            'flex-x-center': 'flex justify-center'
        },
        {
            'flex-y-center': 'flex items-center'
        },

    ],
    theme: {
        colors: {
        }
    },
    presets: [
        presetWind3(),
        presetAttributify(),
        presetIcons(),
        presetTypography(),
        presetWebFonts({
            fonts: {
            },
        }),
    ],
    transformers: [
        transformerDirectives(),
        transformerVariantGroup(),
    ],
    rules: [
        [/^m-(\d+)$/, ([, d]) => ({ margin: `${d as unknown as number / 4}rem` })],
        [/^p-(\d+)$/, ([, d]) => ({ padding: `${d}px` })],
        [/^gap-(\d+)$/, ([, d]) => ({ gap: `${d}px` })],
    ]
})